<template>
	<div class="write-article">
		<h1>有什么新鲜事想告诉大家？</h1>
		<el-input v-model="text" resize="none" show-word-limit :maxlength="2000" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
		<div class="func_area">
			<div class="kind">
				<ul>
					<li>
						<a @click="bubble = true" href="javascript:void(0);"
							><el-icon><Picture /></el-icon>图片</a
						>
						<div class="upload-bubble" v-if="bubble">
							<div class="close" @click="bubble = false">
								<el-icon><Close /></el-icon>
							</div>
							<h1>本地上传</h1>
							<el-upload
								class="el-upload"
								v-model:file-list="fileList"
								action="/api/public/upload"
								:headers="{ Authorization: `Bearer ${token}` }"
								list-type="picture-card"
								:on-preview="handlePictureCardPreview"
								:on-remove="handleRemove"
								:on-success="handleSuccess"
								:on-error="handleError"
								:on-exceed="handleExceed"
								:limit="8"
							>
								<el-icon><Plus /></el-icon>

								<el-dialog v-model="dialogVisible">
									<img w-full :src="dialogImageUrl" alt="Preview Image" />
								</el-dialog>
							</el-upload>
						</div>
					</li>
					<li>
						<a href="javascript:void(0);"
							><el-icon><VideoCamera /></el-icon>视频</a
						>
					</li>
				</ul>
			</div>

			<el-button type="primary" @click="submit" :loading="btnLoading">发布</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { createBlog, deleteFile } from "@/api/user";
import { useUserinfoStore } from "@/stores/userinfo";
import { error } from "@/util/ElMessage";
import type { UploadFile, UploadFiles, UploadProps, UploadUserFile } from "element-plus";
import { inject, ref, type Ref } from "vue";
const bubble = ref(false);
const text = ref("");
const {
	userinfo: { avatar, nickName, user_id }
} = useUserinfoStore();
const blogList: Ref<blogItemType[]> | undefined = inject("blogList");

const ENV = import.meta.env;
const token = useUserinfoStore().token;
const btnLoading = ref(false);
const submit = async () => {
	btnLoading.value = true;
	const images = fileList.value.map((file: UploadUserFile) => {
		const url = file.url!.substring(ENV.VITE_BASE_URL.length);
		return url;
	});
	try {
		const {
			data: { data }
		} = await createBlog(text.value, images);
		blogList!.value.unshift({ content: text.value, image: images, createdAt: new Date(), thumb_up: 0, blog_id: data.blog_id, user: { avatar, nickName, user_id } });
		text.value = "";
		bubble.value = false;
		fileList.value = [];
	} catch (err) {
		console.log(err);

		error("发布失败");
	} finally {
		btnLoading.value = false;
	}
};
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handleExceed = () => {
	error("最多上传9张图片");
};
const handleSuccess: UploadProps["onSuccess"] = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	uploadFile.url = `${ENV.VITE_BASE_URL}${response.data.url}`;
};
const handleError: UploadProps["onError"] = (err: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	error("上传失败：" + err.message);
};
const handleRemove: UploadProps["onRemove"] = async (uploadFile, uploadFiles) => {
	const url = uploadFile.url?.substring(ENV.VITE_BASE_URL.length);

	await deleteFile(url!);
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
	dialogImageUrl.value = uploadFile.url!;
	dialogVisible.value = true;
};
</script>

<style scoped lang="scss">
.write-article {
	background-color: #fff;
}
.write-article > h1 {
	color: #1b7fb6;
}
.el-textarea {
	margin: 10px 0;
}
.write-article {
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.func_area {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.kind > ul {
	display: flex;
	padding-top: 5px;
	li {
		margin-right: 15px;
		position: relative;
	}
	a {
		.el-icon {
			margin-right: 5px;
			font-size: 20px;
			color: #ffa405;
		}
		display: inline-flex;
		align-items: center;
		font-size: 12px;
	}
}
.el-button {
	width: 80px;
}
.upload-bubble:before {
	position: absolute;
	top: -16px;
	left: 21px;
	border-bottom: 8px solid #ffffff;
	border-top: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	content: "";
	z-index: 3;
}
.upload-bubble:after {
	position: absolute;
	top: -18px;
	left: 20px;

	border-bottom: 9px solid #cccccc;
	border-top: 9px solid transparent;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	content: "";
	z-index: 2;
}
.upload-bubble {
	position: absolute;
	z-index: 9999;
	border: 1px solid $grey;
	border-radius: 5px;
	width: 280px;
	background-color: #fff;
	padding: 10px;
	box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
	h1 {
		text-indent: 5px;
		margin-bottom: 10px;
	}
	.close {
		position: absolute;
		right: 5px;
		font-size: 20px;
		color: #6a6f79;
		cursor: pointer;
		top: 5px;
	}
}

::v-deep .el-upload-list__item,
::v-deep .el-upload--picture-card {
	width: 80px;
	height: 80px;
}
</style>
